<template>
  <div>
    <a-card :bordered="false">
      <a-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data-source="tableData.data" :pagination="false" :loading="tableLoading">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="name" slot-scope="text, record" class="goods">
          <p class="tagType green" v-if="record.isInLook == 1">LOOK</p>
          <img :src="record.imgUrl" alt="" class="thumbnail" @click="showGoodInfo(record)" />
          <span class="goods-info">
            <h3>{{ text }}</h3>
            <span class="price">¥ {{ record.price }}</span>
            <span class="code">{{ record.productCode }}</span>
          </span>
        </span>
        <span slot="color" slot-scope="text, record" :id="record.id">
          <a-select
            :value="record.colorNo"
            style="width: 120px"
            :getPopupContainer="triggerNode => triggerNode.parentNode"
            @dropdownVisibleChange="querySkuAndStock(record, 'color')"
            @select="
              value => {
                selectColor(value, record)
              }
            "
          >
            <a-select-option :value="colorItem.colorno" v-for="(colorItem, colorIndex) in record.colorList" :key="colorIndex">
              {{ colorItem.color_name }}
            </a-select-option>
          </a-select>
        </span>
        <span slot="size" slot-scope="text, record" :id="record.id">
          <a-select
            :value="record.sizeNo"
            style="width: 120px"
            :getPopupContainer="triggerNode => triggerNode.parentNode"
            @dropdownVisibleChange="querySkuAndStock(record, 'size')"
            @select="
              value => {
                selectSize(value, record)
              }
            "
          >
            <a-select-option :value="sizeItem.sizeno" v-for="(sizeItem, sizeIndex) in record.sizeList" :key="sizeIndex" :disabled="disabledSize(record, sizeItem.sizeno)">
              {{ sizeItem.size_name }}
            </a-select-option>
          </a-select>
        </span>
        <span slot="colorsize" slot-scope="t, record, index" :id="record.id">
          <a-cascader
            :options="record.skuOptions"
            :value="[record.currentSku.colorNo, record.currentSku.sizeNo]"
            :allowClear="false"
            :disabled="record.disabled"
            @change="v => skuOnChange(v, record, index)"
            @popupVisibleChange="v => skuPopVisible(v, record)"
            :popupVisible="record.pop"
          />
        </span>
        <span slot="stock" slot-scope="text, record"> {{ text }}<span class="neitao" v-if="record.ifEb">内淘</span> </span>
        <span slot="feedback" slot-scope="text, record">
          <template>
            <a @click="checkFeedback(record)">查看</a>
          </template>
        </span>
        <span slot="promotionPrice" slot-scope="text, record">
          <a-skeleton :loading="record.promotionPrice != null ? false : true" active style="width: 100px; margin: 0 auto" :paragraph="false">
            <span style="color: #f45555">¥ {{ text }}</span
            ><span v-if="Number(record.price)">（{{ (text / record.price).toFixed(2) }}）</span><span v-else>（1.00）</span
            ><a-icon type="redo" @click="checkPromotionPrice(record)" style="color: #1890ff" />
          </a-skeleton>
          <!-- <span v-if="record.discount >= 0">
              <span style="color:#F45555;">¥ {{ record.discount * record.price }}</span
              >（{{ record.discount }}）
              <a-icon type="redo" @click="checkDiscount(record)" style="color:#1890ff;" />
            </span>
            <span v-else-if="record.discount == -1">
              <a-icon type="loading" style="color:#1890ff;" />
            </span>
            <a @click="checkDiscount(record)" v-else>查看</a> -->
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm
              placement="bottomRight"
              title="确认删除这个商品吗?"
              ok-text="Yes"
              cancel-text="No"
              @confirm="deleteStylingGood(record.id, record)"
              style="white-space: pre-line"
              class="cart-del"
            >
              <a-icon type="delete" :style="{ fontSize: '16px', color: '#1890ff' }" /> </a-popconfirm
          ></template>
        </span>
      </a-table>
      <a-button type="primary" block @click="backSelection"><a-icon type="plus" />添加商品</a-button>
    </a-card>
    <br />
    <a-card :bordered="false">
      <a-list item-layout="horizontal" :loading="loading" :data-source="lookData" class="look-list">
        <a-list-item slot="renderItem" slot-scope="item, index" :id="item.stylingBaseId">
          <div class="look-area">
            <div class="look-title">
              <h2 v-if="item.type == 1">LOOK {{ index + 1 }}</h2>
              <h2 v-else>单品</h2>
              <!-- <a-icon type="delete" :style="{ fontSize: '24px' }" class="look-delete" v-if="index>0 && item.type!==2" @click="deleteStyling(item.stylingBaseId,index)"/> -->
              <!-- 删除look二次确认 -->
              <a-popconfirm
                placement="bottomRight"
                title="确认删除这个LOOK吗?"
                ok-text="Yes"
                cancel-text="No"
                @confirm="deleteStyling(item.stylingBaseId, index)"
                @cancel="cancelDelete"
                v-if="index > 0 && item.type !== 2"
              >
                <a-icon type="delete" :style="{ fontSize: '24px' }" class="look-delete"></a-icon>
              </a-popconfirm>
            </div>
            <div>
              <div class="look-content">
                <div class="cards">
                  <a-card class="look-card" v-for="(goodsItem, goodsIndex) in item.stylings" :key="goodsIndex" hoverable :id="goodsItem.stylingBaseId">
                    <a-button shape="circle" icon="close" class="close" size="small" @click="deleteStylingDetail(goodsItem.id, item.stylings, goodsIndex)"> </a-button>
                    <img
                      slot="cover"
                      :alt="goodsItem.productName"
                      :title="goodsItem.productName"
                      :src="goodsItem.imgUrl != null ? goodsItem.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                      class="img-cover"
                    />
                    <a-card-meta :title="goodsItem.productName">
                      <template slot="description">
                        {{ goodsItem.productCode }}<br />{{ goodsItem.colorName }}/{{ goodsItem.sizeName }}
                        <div class="left-right">
                          <a-button type="dashed" icon="left" @click="up(goodsIndex, index, goodsItem)" :disabled="goodsIndex == 0" />
                          <a-button type="dashed" icon="right" @click="down(goodsIndex, index, goodsItem)" :disabled="goodsIndex == item.stylings.length - 1" />
                        </div>
                      </template>
                    </a-card-meta>
                  </a-card>
                  <!-- 添加LOOK商品 -->
                  <a-card class="look-card add-goods" hoverable>
                    <a-button type="dashed" icon="plus" size="large" @click="addGoods(item)" />
                    <a-card-meta title="添加"></a-card-meta>
                  </a-card>
                </div>
              </div>
              <a-textarea
                v-model="item.content"
                placeholder="请输入搭配建议"
                :auto-size="{ minRows: 5, maxRows: 6 }"
                :maxLength="140"
                class="remark"
                v-if="item.type == 1"
                @focus="changeValue(item)"
                @blur="saveComment(item)"
              />
            </div>
          </div>
        </a-list-item>
      </a-list>
      <a-button type="primary" icon="plus" block :loading="createStylingLoading" @click="createStyling('LOOK ' + (lookData.length + 1), 1)">添加LOOK</a-button>
    </a-card>
    <br />
    <a-card :bordered="false">
      <a-form :form="form">
        <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商场卡折扣">
          <span v-if="!editDisount"
            ><span class="discount-input">{{ mdl.discount }}</span
            ><a-button type="primary" @click="editDisount = true">修改</a-button></span
          >
          <span v-if="editDisount">
            <a-input-number v-model="mdl.discount" :min="0.9" :max="1" :step="0.01" class="discount-input" placeholder="最小折扣0.9" :autoFocus="true" @change="changeDiscount" />
            <a-button type="primary" @click="completeDiscount"> 完成 </a-button>
          </span>
        </a-form-item> -->
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="衣袋模板">
          <a-select v-model="mdl.templateId" placeholder="请选择">
            <a-select-option :value="item.id" v-for="(item, index) in templateList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-card>
    <br />
    <a-card :bordered="false" class="address-area">
      <a-button type="primary" v-if="hasLogistic" @click="visibleAddList = true">修改</a-button>
      <a-button type="primary" v-else @click="addAddress">新增地址</a-button>
      <template v-if="hasLogistic">
        <a-descriptions title="收货地址" :column="1">
          <a-descriptions-item label="收件人">
            {{ defLogistic.contactName }}
          </a-descriptions-item>
          <a-descriptions-item label="联系电话">
            {{ defLogistic.contactPhone }}
          </a-descriptions-item>
          <a-descriptions-item label="收货地址"> {{ defLogistic.province }} {{ defLogistic.city }} {{ defLogistic.district }} {{ defLogistic.address }} </a-descriptions-item>
        </a-descriptions>
      </template>
      <template v-else>
        <p>该用户暂无地址信息</p>
      </template>
    </a-card>
    <br />
    <br />
    <div class="button-area">
      <a-checkbox v-model="virtual" :disabled="virtualDisabled">虚拟发货</a-checkbox>
      <a-button type="primary" size="large" style="margin-right: 28px" :loading="saveBoxLoading" @click="checkInsetProduct" :disabled="establish"> 创建服务单</a-button>
      <a-button size="large" @click="cancelBox">取消</a-button>
    </div>
    <a-back-top />
    <!-- 查看反馈 -->
    <a-modal v-model="visibleFeedback" :title="modalTitle" :centered="true" :footer="null" width="70%">
      <div class="card-container">
        <a-tabs type="card" @change="changeTag" :activeKey="activeKey">
          <a-tab-pane :key="index" :tab="`${item.name}(${item.count})`" v-for="(item, index) in taglist">
            <div v-for="(value, i) in tagProduct" :key="i" class="tag-product">
              <p class="name">
                <span>{{ i + 1 }}.【{{ value.brand }}】{{ value.name }}</span>
                <span>{{ value.time }}</span>
              </p>
              <div class="content">
                <img :src="value.img" alt="" />
                <div class="info">
                  <a-tag color="green" class="tag" v-for="(text, j) in value.tags" :key="j">{{ text }}</a-tag>
                  <p>{{ value.name }}</p>
                  <!-- <p>其他问题：</p> -->
                  <p>款号:{{ value.code }}</p>
                  <p>颜色:{{ value.colorNo }}/{{ value.color }}</p>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
    <!-- 选择商品 -->
    <a-modal v-model="visibleGoods" :title="modalTitle" @ok="handleOk" width="70%" :centered="true" @cancel="closeGoods">
      <a-checkbox-group @change="onChange" class="goodslist" :value="chooseSkuIds">
        <a-row>
          <div v-for="item in goodsList" :key="item.skuId" class="goods">
            <a-checkbox :value="item.skuId" class="option">
              <p class="tagType green" v-if="item.isInLook == 1">LOOK</p>
              <div class="goodimg"><img :src="item.imgUrl" alt="" /></div>
              <p class="name">{{ item.productName }}</p>
              <p>{{ item.colorName }}/{{ item.sizeName }}</p>
            </a-checkbox>
          </div>
        </a-row>
      </a-checkbox-group>
    </a-modal>
    <!-- 创建提示单提示 -->
    <a-modal :visible="tipVisible" @ok="tipOk" @cancel="tipCancel" :maskClosable="false" centered :closable="false" :width="400">
      <p style="margin-top: 40px; font-size: 16px">有商品未被添加进look&单品，是否确认提交？</p>
    </a-modal>
    <!-- 创建服务单 -->
    <a-modal okText="查看详情" :visible="serviceVisible" cancelText="返回上层" @ok="serviceOk" @cancel="handleCancel" :maskClosable="false" centered :closable="false" :width="400">
      <p style="margin-top: 40px; font-size: 20px">服务单创建成功！</p>
    </a-modal>
    <!-- 选择地址 -->
    <Address :userInfo="userInfo" :unionId="unionId" :visibleAddList="visibleAddList" :defLogistic="defLogistic" @closeAddress="closeAddress" @newAddress="newAddress"></Address>
    <AddressEdit ref="addressModal" @refreshList="refreshList" :unionId="unionId"></AddressEdit>
    <!-- 商详 -->
    <GoodInfoModal ref="goodInfoModal"></GoodInfoModal>
  </div>
</template>
<script>
// import { STable } from '../../components'
import {
  findStylingCart,
  queryStock,
  querySkus,
  deleteStylingCart,
  queryStylingTpl,
  createStylingTpl,
  deleteStylingTpl,
  batchCreateStylingDetail,
  deleteStylingDetail,
  updateStylingCart,
  saveBox,
  pocketTemplateList,
  getCustomerDefLogistic,
  calcUnitPrice,
  getReturnTags,
  selectProductByTag,
  updateStylingBase,
  selectLogistics,
  assignmentShopCartFPrice,
  deleteStylingCartByIds
} from '@/api/box/workbench'
import { batchGetProductPromotionPrice } from '@/api/box/api'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
// import options from '@/assets/js/china-division'
// import Address from './module/address'
// import AddressEdit from '@/views/box/components/Address/AddressEdit.vue'
// import GoodInfoModal from '../../components/GoodInfoModal'
import { colMixin } from './mixin.js'
const columns = [
  {
    title: '序号',
    align: 'center',
    // dataIndex: 'productNo',
    scopedSlots: { customRender: 'serial' },
    width: '10%'
  },
  {
    title: '商品',
    dataIndex: 'productName',
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  /*  {
    title: '颜色',
    dataIndex: 'color',
    align: 'center',
    scopedSlots: { customRender: 'color' }
  },
  {
    title: '尺码',
    dataIndex: 'size',
    align: 'center',
    scopedSlots: { customRender: 'size' }
  }, */
  {
    title: '颜色/尺码',
    align: 'center',
    scopedSlots: { customRender: 'colorsize' }
  },
  {
    title: '库存',
    dataIndex: 'stock',
    align: 'center',
    scopedSlots: { customRender: 'stock' }
  },
  {
    title: '同类型反馈',
    dataIndex: 'feedback',
    align: 'center',
    width: 200,
    scopedSlots: { customRender: 'feedback' }
  },
  {
    title: '预计折扣',
    dataIndex: 'promotionPrice',
    align: 'center',
    scopedSlots: { customRender: 'promotionPrice' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '200px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  mixins: [colMixin],
  components: {
    // STable,
    // Address,
    // AddressEdit,
    // GoodInfoModal
  },
  data() {
    this.columns = columns
    return {
      serviceVisible: false,
      tipVisible: false,
      boxId: '',
      userInfo: Vue.ls.get(USER_INFO),
      unionId: this.$route.params.unionId,
      outNo: this.$route.params.outNo == ('getstyle' || 'severstyle') ? '' : this.$route.params.outNo,
      severType: this.$route.params.outNo,
      templateList: [],
      defLogistic: {},
      visibleGoods: false,
      visibleFeedback: false,
      chooseSkuIds: [],
      modalTitle: '',
      labelCol: {
        sm: { span: 8 }
      },
      wrapperCol: {
        sm: { span: 8 }
      },
      form: this.$form.createForm(this),
      mdl: {
        // discount: 1
        // templateId: ''
      },
      goodsList: [],
      stockList: [],
      changeList: [],
      tableData: {},
      loading: true,
      getDiscount: false,
      loadData: async parameter => {
        try {
          this.tableLoading = true
          const param = {
            requestData: { unionId: this.unionId },
            user_id: this.userInfo.id
          }
          const result = await this.findStylingCart(param)

          if (result.code === 0) {
            if (result.data.length > 0) {
              const skus = result.data.map(item => {
                return item.skuId
              })
              this.stockList = await this.fetchStock(skus)

              for (var i = 0; i < result.data.length; i++) {
                result.data[i].promotionPrice = null
                result.data[i].skus = []
                result.data[i].colorList = []
                result.data[i].colorList.push({
                  color_name: result.data[i].colorName,
                  colorno: result.data[i].colorNo
                })
                result.data[i].sizeList = []
                result.data[i].sizeList.push({
                  size_name: result.data[i].sizeName,
                  sizeno: result.data[i].sizeNo
                })
                const arr = this.stockList.filter(value => {
                  if (value.skuId === result.data[i].skuId) {
                    return value
                  }
                })
                result.data[i].stock = arr[0].stock
                result.data[i].ifEb = arr[0].ifEb
              }

              // 处理联级skuOptions
              for (let item of result.data) {
                await this.handleSkuOptions(item)
              }

              this.goodsList = result.data
              this.tableData = {
                data: result.data,
                page: result.page
              }
              this.tableLoading = false
              this.getDiscount = true
              this.changeList = result.data
              return this.tableData
            } else {
              this.goodsList = []
              const data = {
                page: {
                  pageNo: 0,
                  count: 0,
                  pageSize: 10
                },
                data: []
              }
              return data
            }
          } else {
            this.$message.error(result.msg)
            this.goodsList = []
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        } catch (err) {
          console.log(err)
        }
      },
      lookData: [],
      singleData: [],
      editLook: {},
      timer: null,
      editDisount: false,
      visibleAddList: false,
      activeKey: 0,
      feedbackId: '',
      taglist: [],
      tagProduct: [],
      hasLogistic: true,
      createStylingLoading: false,
      saveBoxLoading: false,
      tableLoading: false,
      virtual: false,
      virtualDisabled: false
    }
  },
  watch: {
    $route(to) {
      console.log(to.path)
      this.getUnionidOutid()
    },
    getDiscount(val) {
      if (val) {
        this.getAllPromotionPrice()
      }
    },
    goodsList: {
      deep: true,
      immediate: true,
      handler(newValue) {
        let result = newValue.filter(e => e.ifEb)
        if (result.length > 0) {
          this.virtual = false
          this.virtualDisabled = true
        } else {
          this.virtualDisabled = false
        }
      }
    }
  },
  computed: {
    // 判断创建服务单按钮是否置灰
    establish() {
      let notUse = this.goodsList.some(item => {
        return item.isInLook == 1
      })
      return !notUse
    },
    disabledSize() {
      return (record, sizeNo) => {
        let colorNo = record.colorNo
        let result = record.skus.filter(e => e.sizeno == sizeNo && e.colorno == colorNo)
        if (result.length > 0) {
          return !(result[0].stock > 0)
        } else {
          return true
        }
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  mounted() {
    this.information = JSON.parse(localStorage.getItem('box_Information'))
    this.fetchShoppingCart()
    this.fetchLookList()
    this.pocketTemplateList()
    this.getCustomerLogistic()
  },
  methods: {
    // rest() {
    //   const param = {
    //     requestData: { unionId: this.unionId },
    //     user_id: this.userInfo.id
    //   }
    //   this.findStylingCart(param)

    // },
    //返回上层
    async tipOk() {
      let savePriceResult = await this.savePrice()
      if (savePriceResult) {
        await this.saveBox()
      }
      this.tipVisible = false
    },
    tipCancel() {
      this.tipVisible = false
    },
    handleCancel() {
      if (this.severType == 'getstyle') {
        this.$router.push(`/box/customer/customerList/index`)
      } else if (this.severType == 'severstyle') {
        this.$router.push(`/box/serviceOrder/list/fashioner`)
      } else {
        this.$router.push(`/box/workbench/fashioner/list`)
      }
    },
    // 查看详情
    serviceOk() {
      this.$router.push(`/box/serviceOrder/detail/${this.boxId}`)
    },
    // 获取衣袋模板
    pocketTemplateList() {
      pocketTemplateList()
        .then(res => {
          if (res.code === 0) {
            this.templateList = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('获取衣袋模板:' + err)
        })
    },
    getUnionidOutid() {
      this.unionId = this.$route.params.unionId
      this.outNo = this.$route.params.outNo == ('getstyle' || 'severstyle') ? '' : this.$route.params.outNo
    },
    getCustomerLogistic() {
      if (this.outNo) {
        console.log('******要盒******')
        this.hasLogistic = true
        this.getCustomerDefLogistic()
      } else {
        console.log('******下盒******')
        // 判断是否是服务单跳转过来的
        if (this.severType == 'severstyle') {
          this.defLogistic = this.information.defLogistic
          this.mdl.templateId = this.information.pocketTelId
          if (this.information.shopDiscount) {
            this.mdl.discount = this.information.shopDiscount
          }
        } else {
          this.fetchAddressList()
        }
      }
    },
    // 获取默认要盒地址
    getCustomerDefLogistic() {
      getCustomerDefLogistic(this.outNo, this.unionId)
        .then(res => {
          if (res.code === 0) {
            if (res.data != null) {
              this.defLogistic = res.data
            } else {
              this.fetchAddressList()
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('获取默认要盒地址：' + err)
        })
    },
    // 查看顾客地址列表
    fetchAddressList() {
      selectLogistics(this.unionId)
        .then(res => {
          if (res.code === 0) {
            let data = res.data
            if (data.length > 0) {
              this.hasLogistic = true
              let result = data.filter(e => e.logDefault == 1)
              if (result.length > 0) {
                this.defLogistic = result[0]
              } else {
                this.defLogistic = data[0]
              }
            } else {
              this.hasLogistic = false
            }
          } else {
            this.$message.error(res.data)
          }
        })
        .catch(err => {
          console.log('查看顾客地址列表:' + err)
        })
    },
    // 新建地址
    addAddress() {
      this.$refs.addressModal.show({})
    },
    // 刷新地址列表
    refreshList(value) {
      if (value) {
        this.fetchAddressList()
      }
    },
    // 返回选品页面
    backSelection() {
      this.$router.push(`/box/workbench/fashioner/selection/${this.unionId}/${this.$route.params.outNo}`)
    },
    // 刷新购物车
    refreshCart() {
      this.fetchShoppingCart()
    },
    async fetchShoppingCart() {
      try {
        this.tableLoading = true
        const param = {
          requestData: { unionId: this.unionId },
          user_id: this.userInfo.id
        }
        const result = await this.findStylingCart(param)

        if (result.code === 0) {
          if (result.data.length > 0) {
            const skus = result.data.map(item => {
              return item.skuId
            })
            this.stockList = await this.fetchStock(skus)

            for (var i = 0; i < result.data.length; i++) {
              result.data[i].promotionPrice = null
              result.data[i].skus = []
              result.data[i].colorList = []
              result.data[i].colorList.push({
                color_name: result.data[i].colorName,
                colorno: result.data[i].colorNo
              })
              result.data[i].sizeList = []
              result.data[i].sizeList.push({
                size_name: result.data[i].sizeName,
                sizeno: result.data[i].sizeNo
              })
              const arr = this.stockList.filter(value => {
                if (value.skuId === result.data[i].skuId) {
                  return value
                }
              })
              result.data[i].stock = arr[0].stock
              result.data[i].ifEb = arr[0].ifEb
            }

            // 处理联级skuOptions
            for (let item of result.data) {
              item.skus = []
              item.pop = false
              item.disabled = false
              item.skuOptions = [
                {
                  disabled: false,
                  label: item.colorName,
                  value: item.colorNo,
                  children: [{ disabled: false, imgUrl: item.imgUrl, label: item.sizeName, skuId: item.skuId, stock: item.stock, value: item.sizeNo }]
                }
              ]
              item.currentSku = {
                stock: item.stock,
                colorNo: item.colorNo,
                sizeNo: item.sizeNo,
                id: item.skuId,
                imgUrl: item.imgUrl,
                ifEb: item.ifEb
              }
            }

            this.goodsList = result.data
            this.tableData = {
              data: result.data,
              page: result.page
            }
            this.tableLoading = false
            this.getDiscount = true
            this.changeList = result.data
          } else {
            this.goodsList = []
          }
        } else {
          this.$message.error(result.msg)
          this.goodsList = []
        }
      } catch (err) {
        console.log(err)
      }
    },
    findStylingCart(data) {
      return findStylingCart(data)
        .then(res => {
          return res
        })
        .catch(err => {
          console.log(err)
        })
    },
    async querySkuAndStock(item, type) {
      // console.log(item)
      if (item.skus.length == 0) {
        await this.fetchQuerySkus(item)
      }
      if (type == 'size') {
        let skusForColor = item.skus.filter(e => e.colorno == item.colorNo)
        let skuIds = skusForColor.map(i => i.id)
        let stockList = await this.fetchStock(skuIds)
        for (let sku of item.skus) {
          let result = stockList.filter(k => k.skuId == sku.id)
          if (result.length > 0) {
            sku.stock = result[0].stock > 0 ? result[0].stock : 0
          }
        }
      }
    },
    // 选择颜色尺码
    selectColor(value, record) {
      // console.log(value, record)
      if (record.sizeNo && record.sizeName) {
        let defaultSize = {
          sizeNo: record.sizeNo,
          sizeName: record.sizeName,
          colorNo: record.colorNo,
          colorName: record.colorName
        }
        record.defaultSize = defaultSize
      }

      record.colorNo = value
      record.colorName = record.colorList.filter(e => e.colorno == value)[0].color_name
      record.sizeNo = ''
      record.sizeName = ''

      /*  const colorsize = value + record.sizeNo
      // this.checkExistGood(record, colorsize)
      this.checkSku(colorsize, record) */
    },
    selectSize(value, record) {
      // console.log(value, record)
      if (record.sizeNo && record.sizeName) {
        let defaultSize = {
          sizeNo: record.sizeNo,
          sizeName: record.sizeName,
          colorNo: record.colorNo,
          colorName: record.colorName
        }
        record.defaultSize = defaultSize
      }
      if (value == record.defaultSize.sizeNo && record.colorNo == record.defaultSize.colorNo) {
        record.sizeNo = record.defaultSize.sizeNo
        record.sizeName = record.sizeList.filter(e => e.sizeno == value)[0].size_name
        delete record.defaultSize
        return
      }
      const colorsize = record.colorNo + value
      // this.checkExistGood(record, colorsize)
      this.checkSku(colorsize, record, this.goodsList)
    },
    async skuPopVisible(v, item) {
      if (v) {
        await this.handleSkuOptions(item)
      }
      item.pop = v
    },
    async skuOnChange(value, record, index) {
      console.log(value, record)
      if (value[1] == record.currentSku.sizeNo && value[0] == record.currentSku.colorNo) {
        return
      }
      await this.checkSku(value, record, this.goodsList)
    },
    // 确认look中是否含有要修改的商品
    /* checkExistGood(record, colorsize) {
      console.log(record.skuId)

      const cartSkuId = record.skuId
      var emptyList = []
      for (var i = 0; i < this.lookData.length; i++) {
        const stylings = JSON.parse(JSON.stringify(this.lookData[i].stylings))
        if (stylings.length > 0) {
          // look中含商品
          const result = stylings.filter(item => item.skuId === cartSkuId.toString())
          if (result.length > 0) {
            // 含有购物车要修改的商品
            console.log(result)
            const index = stylings.indexOf(result[0])
            console.log(index)
            this.$message.warning('请先删除LOOK/单品中对应的商品，再进行修改！', 2)
            emptyList = emptyList.concat(stylings)
          }
        } else {
          emptyList = emptyList.concat(stylings)
        }
      }
      if (emptyList.length === 0) {
        this.checkSku(colorsize, record)
      }
    }, */
    // 修改购物车商品
    updateStylingCart(goods, record, stock, ifEb) {
      this.getDiscount = false
      let respList = []
      if (record.respList && record.respList.length > 0) {
        respList = record.respList.map(item => {
          const newItem = {
            colorName: goods.color_name,
            colorNo: goods.colorno,
            imgUrl: goods.imgurl,
            productCode: item.productCode,
            productId: item.productId,
            productName: item.productName,
            sizeName: goods.size_name,
            sizeNo: goods.sizeno,
            skuId: goods.id,
            skuCode: goods.no,
            sorted: item.sorted,
            stylingBaseId: item.stylingBaseId,
            id: item.id
          }
          return newItem
        })
      }
      const data = {
        requestData: {
          colorName: goods.color_name,
          colorNo: goods.colorno,
          id: record.id,
          imgUrl: goods.imgurl,
          sizeName: goods.size_name,
          sizeNo: goods.sizeno,
          skuCode: goods.no,
          skuId: goods.id,
          unionId: this.unionId,
          list: respList
        },
        user_id: this.userInfo.id
      }
      updateStylingCart(data)
        .then(res => {
          if (res.code === 0) {
            record.colorName = goods.color_name
            record.colorNo = goods.colorno
            record.imgUrl = goods.imgurl
            record.sizeName = goods.size_name
            record.sizeNo = goods.sizeno
            record.skuCode = goods.no
            record.skuId = parseInt(goods.id)
            record.stock = stock
            record.respList = res.data
            record.ifEb = ifEb
            record.currentSku = {
              stock: goods.stock,
              colorNo: goods.colorno,
              sizeNo: goods.sizeno,
              id: goods.id,
              imgUrl: goods.imgurl,
              ifEb: goods.ifEb
            }
            this.fetchLookList()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('修改购物车商品:' + err)
        })
    },
    // 查看商品折扣
    async checkPromotionPrice(record) {
      record.promotionPrice = null

      const spuList = [{ spuId: record.productId }]
      const priceList = await this.getPromotionPrice(spuList)
      record.promotionPrice = priceList[0].promotionPrice
      /* calcUnitPrice(record.id)
        .then(res => {
          if (res.code === 0) {
            record.discount = res.data
          } else {
            this.$message.error(res.msg)
            record.discount = -2
          }
        })
        .catch(err => {
          console.log('查看商品折扣:' + err)
        }) */
    },
    async getAllPromotionPrice() {
      /****  2021-11-11 Start 查询优惠价  ****/
      const spuList = this.tableData.data.map(e => {
        return { spuId: e.productId }
      })
      const priceList = await this.getPromotionPrice(spuList)
      for (let item of this.tableData.data) {
        item.promotionPrice = priceList.filter(e => e.spuId == item.productId)[0].promotionPrice
      }
      /****  2021-11-11 END 查询优惠价  ****/
    },
    // 批量查询优惠价
    getPromotionPrice(list) {
      let data = {
        requestData: {
          productList: list,
          unionId: this.unionId
        },
        user_id: this.userInfo.id
      }
      return batchGetProductPromotionPrice(data)
        .then(res => {
          if (res.code == 0) {
            return res.data.productList
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('ProductPromotionPrice:' + err)
        })
    },
    // 查看同类型反馈
    checkFeedback(record) {
      this.activeKey = 0
      this.feedbackId = record.productId
      const data = {
        requestData: {
          productId: record.productId,
          unionId: this.unionId
        },
        user_id: this.userInfo.id
      }
      getReturnTags(data)
        .then(res => {
          if (res.code === 0) {
            if (res.data.length > 0) {
              this.taglist = res.data
              this.getTagProduct(this.taglist[0].name, record.productId)
              this.modalTitle = '同类型商品反馈'
              this.visibleFeedback = true
            } else {
              this.$message.warning('暂无同类型反馈!')
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('反馈tag：' + err)
        })
    },
    getTagProduct(name, id) {
      const data = {
        requestData: {
          productId: id,
          tag: name,
          unionId: this.unionId
        },
        user_id: this.userInfo.id
      }
      selectProductByTag(data)
        .then(res => {
          if (res.code === 0) {
            this.tagProduct = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('获取同品类商品：' + err)
        })
    },
    changeTag(activeKey) {
      this.activeKey = activeKey
      this.getTagProduct(this.taglist[activeKey].name, this.feedbackId)
    },
    // 搭盒商品购物车删除
    deleteStylingCart(id) {
      this.getDiscount = false
      const data = {
        requestData: {
          id: id
        },
        user_id: this.userInfo.id
      }
      deleteStylingCart(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('购物车商品删除成功！')
            this.refreshCart(true)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('搭盒商品购物车删除:' + err)
        })
    },
    // 确认look中是否含有要删除的商品
    deleteStylingGood(id, record) {
      const cartSkuId = record.skuId
      // console.log(cartSkuId, this.lookData)
      var emptyList = []
      for (var i = 0; i < this.lookData.length; i++) {
        const stylings = JSON.parse(JSON.stringify(this.lookData[i].stylings))
        console.log(stylings)
        // if (stylings.length > 0) {
        // look中含商品
        const result = stylings.filter(item => item.skuId === cartSkuId.toString())
        if (result.length > 0) {
          // 含有购物车要删除的商品
          console.log(result)
          const index = stylings.indexOf(result[0])
          console.log(index)
          // this.$message.warning('请先删除LOOK/单品中对应的商品！', 2)
          emptyList = emptyList.concat(stylings)
          this.deleteStylingDetail(result[0].id, this.lookData[i].stylings, index)
        }
        // } else {
        //   emptyList = emptyList.concat(stylings)
        // }
      }
      this.deleteStylingCart(id)
    },
    // 查询look列表
    async fetchLookList() {
      try {
        const stylingResult = await this.queryStyling()
        // this.$forceUpdate()
        if (stylingResult.code === 0) {
          this.lookData = []
          this.singleData = []
          for (var i = 0; i < stylingResult.data.length; i++) {
            if (stylingResult.data[i].type === 2) {
              this.singleData.push(stylingResult.data[i])
            } else {
              this.lookData.push(stylingResult.data[i])
            }
          }
          if (this.singleData.length > 0) {
            this.lookData.push(this.singleData[0])
          }
          this.loading = false
        } else {
          this.$message.error(stylingResult.msg)
          this.loading = false
        }
      } catch (err) {
        console.log(err)
        this.loading = false
      }
    },
    queryStyling() {
      if (this.$route.params.outNo == 'severstyle') {
        this.outNo = ''
      }
      const data = {
        page: {
          pageNo: 1,
          pageSize: 100
        },
        requestData: {
          outNo: this.outNo,
          unionId: this.unionId
        },
        user_id: this.userInfo.id
      }
      return queryStylingTpl(data)
        .then(res => {
          return res
        })
        .catch(err => {
          console.log('查询look列表:' + err)
        })
    },
    // 创建搭配模版
    createStyling(name, type) {
      this.createStylingLoading = true
      if (this.lookData.length >= 6) {
        this.$message.warning('最多5个LOOK！')
        this.createStylingLoading = false
      } else {
        const data = {
          requestData: {
            outNo: this.outNo,
            name: name,
            type: type,
            unionId: this.unionId
          },
          user_id: this.userInfo.id
        }
        createStylingTpl(data)
          .then(res => {
            console.log(res)
            if (res.code === 0) {
              this.$message.success('创建成功！')
              this.fetchLookList()
            } else {
              this.$message.error(res.msg)
            }
            this.createStylingLoading = false
          })
          .catch(err => {
            console.log('创建搭配模版' + err)
            this.createStylingLoading = false
          })
      }
    },
    // 删除搭配模版
    deleteStyling(id, index) {
      this.getDiscount = false
      this.loading = true
      const data = {
        requestData: {
          id: id
        },
        user_id: this.userInfo.id
      }
      deleteStylingTpl(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('删除LOOK成功！')
            this.lookData.splice(index, 1)
            this.refreshCart()
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
        .catch(err => {
          console.log('删除搭配模版:' + err)
          this.loading = false
        })
    },
    // 取消删除搭配模版
    cancelDelete(e) {
      console.log(e)
    },
    // 单品/look添加商品
    addGoods(item) {
      if (this.goodsList.length > 0) {
        this.visibleGoods = true
        this.$nextTick(() => {
          this.editLook = item
          // console.log(this.editLook)
          this.chooseSkuIds = []
          this.chooseSkuIds = item.stylings.map(value => parseInt(value.skuId))
          console.log(this.chooseSkuIds, item.stylings, this.goodsList)
          this.modalTitle = '选择单品'
        })
      } else {
        this.$message.warning('请添加商品至购物车！')
      }
    },
    // 关闭商品选择弹窗
    closeGoods() {
      this.chooseSkuIds = []
      this.editLook = {}
    },
    // 选择添加商品至单品/look
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      this.chooseSkuIds = checkedValues
    },
    // 确定批量商品添加至单品/look
    handleOk(e) {
      this.getDiscount = false
      const chooseList = []
      if (this.chooseSkuIds.length > 0) {
        for (var i = 0; i < this.chooseSkuIds.length; i++) {
          const item = this.goodsList.filter(value => {
            if (value.skuId === this.chooseSkuIds[i]) {
              return value
            }
          })

          chooseList.push(item[0])
        }
        const requestData = chooseList.map(item => {
          const newItem = {
            colorName: item.colorName,
            colorNo: item.colorNo,
            imgUrl: item.imgUrl,
            productCode: item.productCode,
            productId: item.productId,
            productName: item.productName,
            sizeName: item.sizeName,
            sizeNo: item.sizeNo,
            skuId: item.skuId,
            stylingBaseId: this.editLook.stylingBaseId,
            type: 1
          }
          return newItem
        })

        const data = {
          requestData: requestData,
          user_id: this.userInfo.id
        }
        batchCreateStylingDetail(data)
          .then(res => {
            if (res.code === 0) {
              this.$message.success('添加商品成功！')
              this.fetchLookList()
              // this.rest()
              this.refreshCart()
            } else {
              this.$$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log('批量添加商品至look' + err)
          })
        this.visibleGoods = false
      } else {
        this.chooseSkuIds = []
        this.editLook = {}
        this.visibleGoods = false
      }
    },
    // 自动保存评价
    changeValue(item) {
      // console.log("我是定时器 ")
      // this.timer = window.setInterval(() => {
      //   setTimeout(this.saveComment(item), 0)
      // }, 10000)
    },
    // 清除定时器
    clearSave(item) {
      // this.saveComment(item)
      // if (this.timer) { // 如果定时器还在运行 或者直接关闭，不用判断
      //   clearInterval(this.timer) // 关闭
      // }
    },
    // 更新搭配简介
    saveComment(item) {
      var content
      if (item.content === null) {
        content = ''
      } else {
        content = item.content
      }
      const data = {
        requestData: {
          content: content,
          id: item.stylingBaseId
        },
        user_id: this.userInfo.id
      }
      updateStylingBase(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('搭配建议已保存成功')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 删除搭配明细
    deleteStylingDetail(id, list, index) {
      console.log(id, list, index)
      this.getDiscount = false
      const data = {
        requestData: {
          id: id
        },
        user_id: this.userInfo.id
      }
      deleteStylingDetail(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('商品删除成功！')
            this.updateCartForLookDel(id, list, index)
            list.splice(index, 1)
            // this.rest()
            // this.fetchLookList()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('删除搭配明细:' + err)
        })
    },
    // 删除搭配明细更新购物车
    updateCartForLookDel(id, list, index) {
      let item = list[index]
      let result = this.goodsList.filter(e => e.skuId == item.skuId)
      if (result.length > 0) {
        let respList = result[0].respList.filter(j => j.id != item.id)
        result[0].respList = respList
        if (result[0].respList.length == 0) {
          result[0].isInLook = 0
        } else {
          result[0].isInLook = 1
        }
      }
    },
    // 前移
    async up(i, index, item) {
      console.log(i, index, item)
      const list = JSON.parse(JSON.stringify(this.lookData[index].stylings))
      if (i > 0) {
        ;[list[i - 1], list[i]] = [list[i], list[i - 1]]
        this.lookData[index].stylings = list
        this.$forceUpdate()
        await this.editLookDetailSorted(this.lookData[index])
        await this.fetchLookList()
        let newList = JSON.parse(JSON.stringify(this.lookData[index].stylings))
        this.updateCartForLookSorted(newList)
      }
    },
    // 后移
    async down(i, index, item) {
      console.log(i, index, item)
      const list = JSON.parse(JSON.stringify(this.lookData[index].stylings))
      if (i < list.length - 1) {
        ;[list[i + 1], list[i]] = [list[i], list[i + 1]]
        this.lookData[index].stylings = list
        this.$forceUpdate()
        await this.editLookDetailSorted(this.lookData[index])
        await this.fetchLookList()
        let newList = JSON.parse(JSON.stringify(this.lookData[index].stylings))
        this.updateCartForLookSorted(newList)
      }
    },
    // 编辑look商品排序
    editLookDetailSorted(obj) {
      let chooseList = obj.stylings
      this.getDiscount = false
      const requestData = chooseList.map(item => {
        const newItem = {
          colorName: item.colorName,
          colorNo: item.colorNo,
          imgUrl: item.imgUrl,
          productCode: item.productCode,
          productId: item.productId,
          productName: item.productName,
          sizeName: item.sizeName,
          sizeNo: item.sizeNo,
          skuId: item.skuId,
          stylingBaseId: obj.stylingBaseId,
          type: 1
        }
        return newItem
      })

      const data = {
        requestData: requestData,
        user_id: this.userInfo.id
      }
      return batchCreateStylingDetail(data)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message.success('编辑look商品顺序成功！')
          } else {
            this.$$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('编辑look顺序：' + err)
        })
    },
    // 编辑look商品排序后更新购物车
    updateCartForLookSorted(newList) {
      for (let obj of newList) {
        let item = this.goodsList.filter(i => i.skuId == obj.skuId)
        if (item.length > 0) {
          let stylingBaseId = obj.stylingBaseId
          let respList = item[0].respList
          for (let jk of respList) {
            if (jk.stylingBaseId == stylingBaseId) {
              jk.id = obj.id
              jk.sorted = obj.sorted
            }
          }
        }
      }
    },
    // 修改折扣
    changeDiscount(value) {
      /* if (value < 0.9) {
        this.$message.warning('最小折扣0.9！')
      } */
    },
    completeDiscount() {
      this.editDisount = false
    },
    // 关闭地址modal
    closeAddress(value) {
      this.visibleAddList = value
    },
    newAddress(value) {
      console.log(value)
      this.defLogistic = value
    },
    // 确认购物车商品是否全部使用
    async checkInsetProduct() {
      if (this.goodsList.length > 0) {
        var styling = []
        for (var i = 0; i < this.lookData.length; i++) {
          const list = this.lookData[i].stylings
          if (list.length > 0) {
            for (var j = 0; j < list.length; j++) {
              if (styling.indexOf(list[j].skuId) === -1) {
                styling.push(list[j].skuId)
              }
            }
          }
        }

        // var notUse = []
        // for (var a = 0; a < this.goodsList.length; a++) {
        //   if (styling.indexOf(this.goodsList[a].skuId.toString()) === -1) {
        //     notUse.push(this.goodsList[a])
        //   }
        // }
        // console.log(notUse)
        // if (notUse.length > 0) {
        //   const msg = notUse.map(item => item.productCode)
        //   const msgString = msg.toString()
        //   this.$message.warning(`请将购物车内 ${msgString} 加入look/单品中！`, 5)
        // } else {
        //   let savePriceResult = await this.savePrice()
        //   if (savePriceResult) {
        //     await this.saveBox()
        //   }
        // }
        var notUse = []
        for (var a = 0; a < this.goodsList.length; a++) {
          if (styling.indexOf(this.goodsList[a].skuId.toString()) === -1) {
            notUse.push(this.goodsList[a])
          }
        }
        console.log(notUse)
        if (notUse.length > 0) {
          const msg = notUse.map(item => item.productCode)
          const msgString = msg.toString()
          this.tipVisible = true
        } else {
          let savePriceResult = await this.savePrice()
          if (savePriceResult) {
            await this.saveBox()
          }
        }
      } else {
        this.$message.warning('请添加商品至购物车！')
      }
    },
    // 保存优惠价
    savePrice() {
      let list = this.goodsList.map(e => e.id)
      let params = {
        requestData: {
          shopCartIdList: list,
          unionId: this.unionId
        },
        user_id: this.userInfo.id
      }
      return assignmentShopCartFPrice(params).then(res => {
        if (res.code == 0) {
          return true
        } else {
          this.$message.warning(res.msg)
          return false
        }
      })
    },
    // 批量删除购物车中没有加入look的商品
    batchDeleteStylingCart() {
      var styling = []
      for (var i = 0; i < this.lookData.length; i++) {
        const list = this.lookData[i].stylings
        if (list.length > 0) {
          for (var j = 0; j < list.length; j++) {
            if (styling.indexOf(list[j].skuId) === -1) {
              styling.push(list[j].skuId)
            }
          }
        }
      }
      var notUse = []
      for (var a = 0; a < this.goodsList.length; a++) {
        if (styling.indexOf(this.goodsList[a].skuId.toString()) === -1) {
          notUse.push(this.goodsList[a])
        }
      }
      let deleteByIds = notUse.map(item => {
        return item.id
      })
      if (notUse && notUse.length > 0) {
        const params = {
          requestData: {
            ids: deleteByIds
          },
          user_id: this.userInfo.id
        }
        deleteStylingCartByIds(params).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 保存服务单
    saveBox() {
      if (this.lookData[0].stylings.length > 0) {
        this.saveBoxLoading = true
        if (this.mdl.templateId) {
          if (this.defLogistic.id) {
            this.batchDeleteStylingCart() // 删除购物车中没有加入look的商品
            const data = {
              requestData: {
                customerAskBoxId: this.outNo,
                customerLogisticsId: this.defLogistic.id,
                // discount: this.mdl.discount,
                templateId: this.mdl.templateId,
                unionId: this.unionId
              },
              user_id: this.userInfo.id
            }

            // 虚拟发货
            let hasEb = this.goodsList.filter(e => e.ifEb)
            if (hasEb.length > 0) {
              this.virtual = false
              this.virtualDisabled = true
              data.requestData.ifVirDelivery = 0
            } else {
              data.requestData.ifVirDelivery = this.virtual ? 1 : 0
            }

            saveBox(data)
              .then(res => {
                if (res.code === 0) {
                  this.serviceVisible = true
                  this.boxId = res.data
                  if (this.userInfo.roleCode.indexOf('fashioner') !== -1 || this.userInfo.roleCode.indexOf('10003') !== -1) {
                    gio('track', 'event_create_box', { cur_fashioner_id: this.userInfo.phone, cur_unionid: this.unionId, cur_box_sn: this.boxId })
                  }
                  localStorage.removeItem('box_Information') // 清空服务单重制页面存的数据
                  // this.serviceVisible = true
                  // this.boxId = res.data
                  // this.$message.success('创建服务单成功！')
                  // setTimeout(() => {
                  //   this.$router.push(`/box/workbench/fashioner/list`)
                  // }, 2000)
                } else if (res.code === -4) {
                  this.$message.error(res.msg)
                  setTimeout(() => {
                    this.$router.push(`/box/workbench/fashioner/list`)
                    localStorage.removeItem('box_Information') // 清空服务单重制页面存的数据
                  }, 2000)
                } else {
                  this.$message.error(res.msg)
                }
                this.saveBoxLoading = false
              })
              .catch(err => {
                console.log('保存服务单:' + err)
                this.saveBoxLoading = false
              })
          } else {
            this.$message.error('请选择地址！')
            this.saveBoxLoading = false
          }
        } else {
          this.$message.error('请选择衣袋模板！')
          this.saveBoxLoading = false
        }
      } else {
        this.$message.error('请补充look1！')
      }
    },
    // 取消盒子
    cancelBox() {
      if (this.severType == 'getstyle') {
        this.$router.push(`/box/customer/customerList/index`)
      } else if (this.severType == 'severstyle') {
        this.$router.push(`/box/serviceOrder/list/fashioner`)
      } else {
        this.$router.push(`/box/workbench/fashioner/list`)
      }
    },
    showGoodInfo(record) {
      this.$refs.goodInfoModal.show(record.productId, record.skuId)
    }
  }
}
</script>
<style lang="less" scoped>
.tagType {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2;
  padding: 0 8px;
  &.green {
    background: #214b0f;
  }
}
body {
  /deep/ .ant-popover-message-title {
    white-space: pre-line;
  }
}
.tag-product {
  border-bottom: 1px solid #cdcdcd;
  .name {
    display: flex;
    justify-content: space-between;
  }
  .content {
    display: flex;
    img {
      width: 120px;
      height: 120px;
      object-fit: scale-down;
      border: 1px dashed #cdcdcd;
      margin-right: 24px;
    }
    .info {
      .tag {
        margin-bottom: 12px;
      }
    }
  }
}
.goods {
  display: flex;
  position: relative;
  .thumbnail {
    height: 100px;
    margin-right: 12px;
    border: 1px dashed #cdcdcd;
    width: 100px;
    object-fit: scale-down;
    background: #fff;
    cursor: pointer;
  }
  .goods-info {
    text-align: left;

    h3 {
      font-size: 16px;
      margin-top: 10px;
    }
    .price {
      color: #f45555;
      font-size: 14px;
      display: block;
    }
    .code {
      font-size: 12px;
      display: block;
    }
  }
}
.look-list {
  /deep/ .ant-list-item {
    width: 100%;
    display: block;
    padding: 0;
  }
  .ant-list-item:first-child {
    .look-area {
      .look-title {
        margin-top: 0;
      }
    }
  }
}
.look-area {
  // border-bottom: 1px solid #e8e8e8;
  overflow: hidden;
  margin-bottom: 20px;
  .look-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    h2 {
      line-height: 48px;
    }
    .look-delete {
      line-height: 48px;
      color: #1890ff;
      cursor: pointer;
    }
  }

  .look-content {
    width: 100%;
    background-color: #ececec;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    .cards {
      display: flex;
      flex-wrap: wrap;
      .look-card {
        margin-right: 24px;
        margin-bottom: 24px;
        position: relative;
        min-width: 190px;
        .close {
          position: absolute;
          top: -12px;
          right: -12px;
          i {
            color: white;
          }
        }
        .img-cover {
          width: 140px;
          height: 140px;
          object-fit: scale-down;
          margin: 24px auto 0;
          border: 1px dashed #cdcdcd;
        }
        .left-right {
          display: flex;
          justify-content: space-between;
          margin-top: 24px;
        }
      }
      .add-goods {
        button {
          width: 140px;
          height: 140px;
          border-radius: 4px;
          font-size: 30px;
          font-weight: normal;
          margin: 0 auto 30px;
        }
        /deep/ .ant-card-meta-title {
          text-align: center;
        }
      }
    }
  }
  textarea.ant-input {
    background-color: #ececec;
    border-radius: 4px;
    border: none;
    padding: 12px;
    margin-bottom: 12px;
  }
}
.goods-area {
  border-bottom: none;
  margin-bottom: 0;
}
.address-area {
  position: relative;
  button {
    position: absolute;
    right: 24px;
    top: 24px;
  }
}
.discount-input {
  width: 40%;
  margin-right: 24px;
  cursor: default;
  color: rgba(0, 0, 0, 0.85);
}
.ant-input[disabled] {
  background: #fff;
}
.button-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
.goodslist {
  width: 100%;
  .ant-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    grid-column-gap: 16px;
    justify-content: space-evenly;
  }
  .ant-row::before {
    content: '';
    width: 0;
    display: none;
  }
  .goods {
    padding: 0 0 8px 0;
  }
  .option {
    position: relative;
    margin-bottom: 12px;
    /deep/ .ant-checkbox {
      position: absolute;
      right: -8px;
      top: -8px;
    }
    /deep/ .ant-checkbox + span {
      padding: 0;
    }
    .goodimg {
      width: 120px;
      height: 120px;
      padding: 2px;
      border: 1px dashed #d9d9d9;
      img {
        width: 100%;
        height: 100%;
        object-fit: scale-down;
      }
    }
    p {
      text-align: center;

      font-size: 12px;
    }
    .name {
      margin-top: 12px;
      line-height: 26px;
      font-size: 14px;
      margin-bottom: 0px;
    }
  }
  .option:hover {
    .goodimg {
      border: 1px dashed #1890ff;
    }
  }
}
.card-container {
  background: #fff;
  overflow: hidden;
  padding: 0px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
.neitao {
  width: 30px;
  height: 18px;
  line-height: 18px;
  background: #ffba00;
  border-radius: 4px;
  font-size: 10px;
  color: #1d2741;
  display: inline-block;
  text-align: center;
  margin-left: 6px;
}
</style>

